58
Hey everyone-
This is my first post at The Scripts, but I've used the forums before for other programming issues. Hopefully, someone has some solid styling advice for me.
I've now been dealing with XHTML/CSS for about a week. I'm trying to set up a website for my dad, and this navigation menu is driving me nuts.
I designed this part of the site on Firefox 2.0.
Here's the link: http://www.yalestartups.com/tburger/test.html
If you open it in Firefox, the navigation works as designed. Drop-down boxes appear under each link, and the link changes color upon mouse-over.
The problem occurs when I open the page in other browsers. Even though I've put the navigation menu on a separate z-index and positioned it absolutely, I want it to line up the way it does in Firefox.
I assume this is a cross browser issue - and I've tried to globally change the margins and padding to accommodate this...
But I think it may be something else, because the :hover behaviors don't act the same in other browsers either.
This could be blatantly obvious, but I'm new...
Any help, comments, advice would be appreciated...I've really enjoyed working on this first site, and would like to get more seriously involved with web design...
Thanks,
Tom
------------CSS File
/* Universal Browser Accomodation */
* {
padding:0;
margin:0;
}
/* Body: Format Color / Margins */
body{
margin: 0;
padding: 0;
background: #333333;
}
/*-------Central Content Box id = "container"-------*/
#container{
width: 850px;
height: auto;
position: absolute;
top:0;
left:50%;
margin-left: -425px;
background: white;
border-left: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 2px black;
z-index:1;
}
/*---------Primary Text Box id = "textbox"---------*/
#textbox{
width: 640px;
height: auto;
padding-left: 200px;
padding-top: 0px;
}
/* Content Styling */
h1{
font-family: Geneva;
font-size: 24px;
color: #0066CC;
border-bottom: solid 2px #cc9900;
}
p{
font-family: geneva;
font-size: 16px;
}
/*-------Page Background Structure----------*/
/* Background Table */
table{
width: 850px;
height: 259px;
border-bottom: solid 1px black;
}
/* Table Column Definitions */
td.left{
width: 339px;
}
td.right{
width: 511px;
}
#navleft{
margin:0;
height:133px;
background-image:url(topleft.gif);
}
#navbleft{
margin:0;
height:125px;
background-image:url(botleft.gif);
}
#navright{
margin:0;
height: 133px;
background-image: url(topright.gif);
}
#navbright{
margin:0;
height: 125px;
background-image: url(botright.gif);
}
/*------Top Navigation Menu------------*/
dt{
min-height:30px;
}
#dropmenu{
position: absolute;
top: 37px;
left: 474px;
z-index:3;
}
#dropmenu dl{
float: left;
}
#dropmenu dt{
cursor: pointer;
}
#dropmenu dd{
float: left;
text-align: left;
margin-top: -4px; /*IMPORTANT Overlap with "dt" for Clean Navigation*/
margin-left: 10px;
width: 125px;
background-color: #999999;
border: solid 1px black;
}
#dropmenu a.slink{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: white;
}
#dropmenu li{
text-align: left;
height:auto;
display: block;
width:auto;
margin-left: 5px;
margin-top: 2px;
margin-bottom: 4px;
}
#dropmenu a.slink:hover{
color: #660000;
}
#dropmenu li:hover{
border-bottom: dotted 3px #CC9900;
}
/* Secondary (Lower) Link Positioning */
#lownav{
position: absolute;
top: 75px;
left: 765px;
z-index: 2;
}
/* Top Link Styling */
a.nav, a.lownav{
margin-left: 14px;
color: white;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
}
a.lownav{
margin-left: 10px;
}
/* Top Link Hover Actions*/
a.nav:hover,a.lownav:hover{
color:#CC9900;
}
/*------Side Navigation Box------------------*/
#snav{
margin-top: 0px;
margin-bottom: 0px;
float: left;
width: 185px;
min-height: 500px;
background-color: #5A594A;
border-right: solid 1px black;
clear: left;
}
/* Side Link Styling*/
/* One Line Link Definitions */
a.snavone{
margin-top: 12px;
float: left;
width: 173px;
height: 30px;
background-color: #003366;
border-top: solid 2px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
text-decoration: none;
}
/* Two Line Link Definitions */
a.snavtwo{
margin-top: 12px;
float: left;
width: 173px;
height: 47px;
background-color: #003366;
border-top: solid 2px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
text-decoration: none;
}
/* Side Link Spacing */
span.snavtext{
padding-top: 5px;
padding-left: 12px;
display: block;
text-align: left;
color: white;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}
/* Side Link Hover Action */
a.snavone:hover, a.snavtwo:hover{
background-color:#660000;
}
/* -------Page Footer-------*/
#footer{
margin: 0;
float: left;
clear: left;
width: 850px;
height: 24px;
background-image: url(foot.gif);
background-repeat: repeat-x;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
border-top: solid 1px black;
}
/* Footer Text Styling */
#footttext{
display: block;
text-align:center;
margin-top: 6px;
color: white;
}
/* Footer Dividers */
span.yell{
color: #CC9900;
}
